<template>
  <div name="InteractionConsult">
    <div class="s-InteractionConsult">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="标      题" prop="title">
          <el-input v-model="form.title" placeholder="您要说明问题的主题"></el-input>
        </el-form-item>
        <el-form-item label="问题详情" prop="desc">
          <el-input type="textarea" v-model="form.desc" placeholder="详细说明您提出的问题"></el-input>
        </el-form-item>
        <el-form-item label="姓      名" prop="name">
          <el-input v-model="form.name" placeholder="请使用已注册的用户名"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请正确填写邮箱地址，我们将把回复发送到您的邮箱"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="form.tel" placeholder="请正确填写固定电话或者手机号码，以便于回复和沟通"></el-input>
        </el-form-item>
        <el-form-item>
          <p class="submit">
            <el-button @click="submit('form')">提交</el-button>
          </p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// 手机号
var validatorPhone = function (rule, value, callback) {
  if (value === "") {
    callback(new Error("手机号不能为空"));
  } else if (!/^1\d{10}$/.test(value)) {
    callback(new Error("手机号格式错误"));
  } else {
    callback();
  }
};
export default {
  name: "InteractionConsult",
  data() {
    return {
      form: {
        title: "",
        desc: "",
        name: "",
        email: "",
        tel: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        desc: [
          { required: true, message: "请详细说明您提出的问题", trigger: "blur" },
          { min: 3, max: 500, message: "长度在 3 到 500 个字符", trigger: "blur" },
        ],
        name: [{ required: true, message: "请使用已注册的用户名", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
        ],
        tel: [{ required: true, validator: validatorPhone, trigger: "blur" }],
      },
    };
  },
  methods: {
    submit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          alert(JSON.stringify(this.form));
          // this.$refs[form].resetFields();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
